<template lang="html">
  <el-dialog
    title="导入订单"
    center
    append-to-body
    custom-class='user-dialog'
    :visible.sync="dialogVisible"
    width="410px"
    :before-close="handleClose">
    <el-upload
      class='order-upload'
      :action="uploadUrl"
      :auto-upload='false'
      :on-success='uploadSuccess'>
        <el-row type='flex' align='middle' justify='space-between'>
          <el-button icon='el-icon-upload2' size='small'>上传附件</el-button>
          <a class='alink' href='javascript:void(0)'>下载模板</a>
        </el-row>
      </div>
      <template #file={file}>
        <a class="el-upload-list__item-name" :href='file.fileUrl' target='_blank' :download="file.name">
          <i class="el-icon-paperclip"></i>{{file.name}}
        </a>
        <!-- <el-progress :show-text='false' v-if="file.status === 'uploading'" :stroke-width="2" :percentage="parsePercentage(file.percentage)" /> -->
        <el-progress :show-text='false' :stroke-width="2" :percentage="20" />
        <i class="el-icon-close" @click="fileRomove(file)"></i>
      </template>
    </el-upload>



    <!-- footer -->
    <template slot="footer">
      <el-button size='small' @click="handleClose()">取 消</el-button>
      <el-button size='small' type="primary" @click="dialogVisible = false">合 并</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  props: ['dialogVisible'],
  data() {
    return {
      uploadUrl: 'http://localhost:8080',
    };
  },
  methods: {
    uploadSuccess(res) {
      console.log(res);
    },
    parsePercentage(val) {
      return parseInt(val, 10);
    },
    handleClose() {
      this.$emit('close');
    },
  },
};
</script>
